<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1" style="margin-top: 20px;">
            <tr class="t_list_caption">
                <td class="colorRed bolds odds" style="text-decoration: none;cursor: initial;">【中】</td>
                <td :class="type == 0 ? 'active': ''" @click="changeFun(0)">二尾连</td>
                <td :class="type == 1 ? 'active': ''" @click="changeFun(1)">三尾连</td>
                <td :class="type == 2 ? 'active': ''" @click="changeFun(2)">四尾连</td>
                <td :class="type == 3 ? 'active': ''" @click="changeFun(3)">五尾连</td>
                <td class="colorRed bolds odds" style="text-decoration: none;cursor: initial;">【不中】</td>
                <td :class="type == 4 ? 'active': ''" @click="changeFun(4)">二尾连</td>
                <td :class="type == 5 ? 'active': ''" @click="changeFun(5)">三尾连</td>
                <td :class="type == 6 ? 'active': ''" @click="changeFun(6)">四尾连</td>
                <td :class="type == 7 ? 'active': ''" @click="changeFun(7)">五尾连</td>
            </tr>
        </table>
        <!-- 尾数 -->
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td width="8%">尾数</td>
                <td>号码</td>
                <td>赔率</td>
                <td>勾选</td>
                <td width="8%">尾数</td>
                <td>号码</td>
                <td>赔率</td>
                <td>勾选</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">0尾</td>
                <td><span class="blueBalls">10</span><span class="blueBalls">20</span><span class="redBalls">30</span><span class="redBalls">40</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':0']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['0']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['0']"></label></td>
                <td class="caption_1">5尾</td>
                <td><span class="greenBalls">05</span><span class="blueBalls">15</span><span class="blueBalls">25</span><span class="redBalls">35</span><span class="redBalls">45</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':5']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['5']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['5']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">1尾</td>
                <td><span class="redBalls">01</span><span class="greenBalls">11</span><span class="greenBalls">21</span><span class="blueBalls">31</span><span class="blueBalls">41</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':1']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['1']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['1']"></label></td>
                <td class="caption_1">6尾</td>
                <td><span class="greenBalls">06</span><span class="greenBalls">16</span><span class="blueBalls">26</span><span class="blueBalls">36</span><span class="redBalls">46</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':6']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['6']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['6']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">2尾</td>
                <td><span class="redBalls">02</span><span class="redBalls">12</span><span class="greenBalls">22</span><span class="greenBalls">32</span><span class="blueBalls">42</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':2']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['2']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['2']"></label></td>
                <td class="caption_1">7尾</td>
                <td><span class="redBalls">07</span><span class="greenBalls">17</span><span class="greenBalls">27</span><span class="blueBalls">37</span><span class="blueBalls">47</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':7']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['7']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['7']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">3尾</td>
                <td><span class="blueBalls">03</span><span class="redBalls">13</span><span class="redBalls">23</span><span class="greenBalls">33</span><span class="greenBalls">43</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':3']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['3']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['3']"></label></td>
                <td class="caption_1">8尾</td>
                <td><span class="redBalls">08</span><span class="redBalls">18</span><span class="greenBalls">28</span><span class="greenBalls">38</span><span class="blueBalls">48</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':8']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['8']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['8']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">4尾</td>
                <td><span class="blueBalls">04</span><span class="blueBalls">14</span><span class="redBalls">24</span><span class="redBalls">34</span><span class="greenBalls">44</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':4']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['4']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['4']"></label></td>
                <td class="caption_1">9尾</td>
                <td><span class="blueBalls">09</span><span class="redBalls">19</span><span class="redBalls">29</span><span class="greenBalls">39</span><span class="greenBalls">49</span></td>
                <td class="colorRed bolds odds">{{ratedata['七码:'+ name +':9']}}</td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['9']" @change="checkboxChange" :disabled="continuousData.betArr.length > 8 && !moneydata['9']"></label></td>
            </tr>
        </table>

    </div>
</template>
<style scoped>
    .t_list_caption>td{
        cursor: pointer;
    }
    .t_list_caption>td.active{
        background: url(../../../../assets/images/t.jpg) repeat-x left top;
    }
</style>
<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "LhcLw",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
                type: 0,  //
                name: '',
                continuousData: {
                    betArr: [],  //下注数组
                    radioopt: 0,  //当前类别
                    betnowtype: 0,  //当前类别 赔率
                },
            }
        },
        methods: {
            init(){

                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(this.type == 0){   //
                    this.name = '二尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery +'oa18';
                }else if(this.type == 1){
                    this.name = '三尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 2){
                    this.name = '四尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 3){
                    this.name = '五尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 4){
                    this.name = '二尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 5){
                    this.name = '三尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 6){
                    this.name = '四尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 7){
                    this.name = '五尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet(url).then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                        

                            if(_this.type == 0){   //
                                _this.continuousData.betnowtype = response.data.rates['七码:二尾连中:$fn'];
                            }else if(_this.type == 1){
                                _this.continuousData.betnowtype = response.data.rates['七码:三尾连中:$fn'];
                            }else if(_this.type == 2){
                                _this.continuousData.betnowtype = response.data.rates['七码:四尾连中:$fn'];
                            }else if(_this.type == 3){
                                _this.continuousData.betnowtype = response.data.rates['七码:五尾连中:$fn'];
                            }else if(_this.type == 4){
                                _this.continuousData.betnowtype = response.data.rates['七码:二尾连不中:$fn'];
                            }else if(_this.type == 5){
                                _this.continuousData.betnowtype = response.data.rates['七码:三尾连不中:$fn'];
                            }else if(_this.type == 6){
                                _this.continuousData.betnowtype = response.data.rates['七码:四尾连不中:$fn'];
                            }else if(_this.type == 7){
                                _this.continuousData.betnowtype = response.data.rates['七码:五尾连不中:$fn'];
                            }
                            _this.continuousData.radioopt = _this.type;
                            // console.log( _this.continuousData);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost(suburl).then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });
                    
                }
            

            },
            inits(){

                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(this.type == 0){   //
                    this.name = '二尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery +'oa18';
                }else if(this.type == 1){
                    this.name = '三尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 2){
                    this.name = '四尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 3){
                    this.name = '五尾连中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 4){
                    this.name = '二尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 5){
                    this.name = '三尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 6){
                    this.name = '四尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }else if(this.type == 7){
                    this.name = '五尾连不中';
                    var url = '/api/game/listRate/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                    var suburl = '/api/setting/rateItem/'+ this.params.nowlottery + '/' + this.params.levellottery + this.name +'oa18';
                }

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet(url).then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                        

                            if(_this.type == 0){   //
                                _this.continuousData.betnowtype = response.data.rates['七码:二尾连中:$fn'];
                            }else if(_this.type == 1){
                                _this.continuousData.betnowtype = response.data.rates['七码:三尾连中:$fn'];
                            }else if(_this.type == 2){
                                _this.continuousData.betnowtype = response.data.rates['七码:四尾连中:$fn'];
                            }else if(_this.type == 3){
                                _this.continuousData.betnowtype = response.data.rates['七码:五尾连中:$fn'];
                            }else if(_this.type == 4){
                                _this.continuousData.betnowtype = response.data.rates['七码:二尾连不中:$fn'];
                            }else if(_this.type == 5){
                                _this.continuousData.betnowtype = response.data.rates['七码:三尾连不中:$fn'];
                            }else if(_this.type == 6){
                                _this.continuousData.betnowtype = response.data.rates['七码:四尾连不中:$fn'];
                            }else if(_this.type == 7){
                                _this.continuousData.betnowtype = response.data.rates['七码:五尾连不中:$fn'];
                            }
                            _this.continuousData.radioopt = _this.type;
                            // console.log( _this.continuousData);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost(suburl).then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });
                }
            

            },
            //切换tab
            changeFun(ind){
                this.type = ind;
                this.init();
                this.moneydata = {};
                this.continuousData.betArr = [];
            },
            checkboxChange(item){

                this.continuousData.betArr = [];

                for (var index in this.moneydata){

                    if(this.moneydata[index]){
                        this.continuousData.betArr.push(index);
                    }

                }
                console.log(this.continuousData);
                this.$emit('contBetFun',this.continuousData);

            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
